$(function () {
  //需求0: 接收id
  // console.log(location.href.split('='))
  // console.log(location.href.split('=')[1])
  function initform() {
    let id = location.href.split('=')[1]
    // alert(id)
    axios({
      method: 'GET',
      url: '/my/article/' + id
    }).then(res => {
      if (res.data.status != 0) {
        return layer.msg(res.data.message)
      }
      // console.log(res.data)
      // 表单赋值
      form.val('formEdit', res.data.data)
      // 富文本-赋值
      setTimeout(function () {
        tinyMCE.activeEditor.setContent(res.data.data.content);
      }, 500)

      // 封面赋值
      let baseURL = 'http://api-breakingnews-web.itheima.net'
      let url = baseURL + res.data.data.cover_img
      $image
        .cropper('destroy')      // 销毁旧的裁剪区域
        .attr('src', url)  // 重新设置图片路径
        .cropper(options)
    })
  }


  let layer = layui.layer
  let form = layui.form
  // 需求1:获取文章类别
  initArtCateList()
  function initArtCateList() {
    axios({
      method: 'GET',
      url: '/my/article/cates',

    }).then(res => {
      // console.log(res.data)
      if (res.data.status != 0) {
        return layer.meg(res.data.message)
      }
      let arry = ['<option value="">请选择文章类别</option>']
      res.data.data.forEach(ele => {
        arry.push(`
        <option value="${ele.Id}">${ele.name}</option>
        `)
      });
      let str = arry.join('')
      $('[name=cate_id]').empty().html(str)
      // 文章分类,select标签渲染完成,form表单同步渲染,需要用render()
      form.render()

      //用于修改form表单的赋值,获取需要修改的form表单的内容
      initform()
    })
  }
  // 需求2: 富文本编辑器
  // 初始化富文本编辑器
  initEditor()

  // 需求3:  // 1. 初始化图片裁剪器
  var $image = $('#image')
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 3. 初始化裁剪区域
  $image.cropper(options)

  // 需求5:点击选择封面触发选择文件事件
  $('#chooseImage').on('click', function () {
    $('#file').click()
  })

  // 需求6:拿到用户选择的文件
  $('#file').on('change', function (e) {
    var file = e.target.files[0]
    if (file == undefined) {
      return layer.msg('请选择您要上传的图片')
    }
    var newImgURL = URL.createObjectURL(file)
    $image
      .cropper('destroy')      // 销毁旧的裁剪区域
      .attr('src', newImgURL)  // 重新设置图片路径
      .cropper(options)        // 重新初始化裁剪区域
  })


  // 获取点击状态
  let state;
  $('#btnSave1').on('click', function () {
    state = '已发布'
  })
  $('#btnSave2').on('click', function () {
    state = '草稿'
  })

  // 需求7:发布事件
  $('#formPub').on('submit', function (e) {
    e.preventDefault()
    let fd = new FormData(this)
    // 添加状态
    fd.append('state', state)
    // console.log(...fd)
    // 添加图片文件
    $image
      .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        fd.append('cover_img', blob)
        // console.log(...fd);
        // 发送ajax
        axios({
          method: 'POST',
          url: '/my/article/edit',
          data: fd
        }).then(res => {
          if (res.data.status != 0) {
            return layer.msg(res.data.message)
          }
          layer.msg('恭喜您 ! 修改文章成功')
          // 后续要跳转到文章列表页
          setTimeout(function () {
            window.parent.document.querySelector('#articlelist').click()
          }, 1500)
          // window.parent.$('#articlelist').trigger("click");

        })

        // 第二个版本ajax的形式,需要添加两个fasle和headers,url要加上前面的根路径
        // $.ajax({
        //   method: 'POST',
        //   url: 'http://api-breakingnews-web.itheima.net/my/article/add',
        //   contentType: false,
        //   processData: false,
        //   data: fd,
        //   headers: {
        //     Authorization: localStorage.getItem('token')
        //   },
        //   success: function (res) {
        //     layer.msg(res.message)
        //   }
        // })
      });


  })


})